<template>
	
	<view class="pages">
		<view class="status_bar"></view>
		<view class="logo_bg"><view class="filcool"></view></view>
		<view class="login_box">
			<view class="qdg-input">
				 <uv-input   color="#fff" placeholder="帐号或手机号" v-model="username" border="none" >
					<template v-slot:prefix>
						<uv-icon color="#e56668" size="24" name="account-fill"></uv-icon>
					</template>
				 </uv-input>
			</view>
			<view class="qdg-input">
				 <uv-input  color="#fff" placeholder="密码" :type="typeInput" v-model="password" border="none" >
					 <template v-slot:prefix>
					 	<uv-icon  color="#e56668" size="24" name="lock-fill"></uv-icon>
					 </template>
					<template v-slot:suffix>
						<uv-icon @click="changeType" v-if="!agreement" color="#ffffff" size="24" name="eye-off-outline"></uv-icon>
						<uv-icon @click="changeType" v-if="agreement" color="#ffffff" size="24" name="eye"></uv-icon>
					</template>
				 </uv-input>
			</view>	
			<view class="qdg-input"  style="background-color: transparent; padding: 0px; height: 15px; margin-bottom: 0px;">
				<view @click="toForget"  class="fgpassword">忘记密码?</view>
			</view>	
			<view class="submit">
				<button @click="toLogin" :disabled="logining" class="submit-btn">登录</button>
			</view>
			<view class="register">还没有账号？<view @click="toRegist" class="a">立即注册</view></view>
		</view>
	</view>
   
</template>


<script>
	import {memberLogin,memberInfo} from '@/api/user.js';
	import {mapMutations} from 'vuex';
	export default{
		data(){
			return{
				username: '',
				password: '',
				logining: false,
				passFlag:true,
				agreement:true,
				typeInput:"password"
			}
		},
		onLoad() {
			this.username = uni.getStorageSync('username') || '';
			this.password = uni.getStorageSync('password') || '';
		},
		methods:{
			...mapMutations(['login']),
			toRegist() {
				uni.navigateTo({url:'/pages/user/register'});
			},
			toForget(){
				uni.navigateTo({
					url:'/pages/user/forget'
				})	
			},
			changeType() {
				this.agreement = !this.agreement,
				this.agreement ? this.typeInput = "text" : this.typeInput = "password";
				
			},
			toLogin() {
			
				if(!this.username){
					uni.showToast({
						title: '请输入账号',
						duration: 2000
					});
					return
				}
				if(!this.password){
					uni.showToast({
						title: '请输入密码',
						duration: 2000
					});
					return
				}
				this.logining = true;
				memberLogin({
					userPhone: this.username,
					password: this.password,
					notice: "获取验证码",
					overtime:" true"
					
				}).then(response => {
					let token = response.data.token;
					let user = {}
					user.inviteCode = response.data.inviteCode;
					user.isAuth =  response.data.isAuth;
					user.userId = response.data.user_id;
					user.userName = response.data.username;
					user.userPhone = response.data.mobile;
					let ids =  response.data.inviteId;
					uni.setStorageSync('token',token);
					uni.setStorageSync('USER',user);
					uni.setStorageSync('IDS',ids);
					uni.showToast({
						title: response.msg,
						duration: 1000
					});
					setTimeout(()=>{
						memberInfo().then(response=>{
							this.login(response.data);
						})
						
						uni.switchTab({
						  url: '/pages/index/index'
						});	
					},2000)
				}).catch(() => {
					this.logining = false;
				});
			},
		}
	}
</script>

<style>
	uni-page-head{
		display: none !important;
	}
	.pages{
		width: 100%;
		height: 100vh;
	    background-size: 100% 100%;
	    background-repeat: no-repeat;
	    background-image: url(/static/img/user/longing.jpg);
	    overflow: hidden;
	}
	.logo_bg{
		height: 175px;
		padding: 25px;
	}
	.login_box {
	    width: 88%;
	    box-sizing: border-box;
	    padding: 40px 10px 20px 10px;
	    background: rgba(0, 0, 0, .4);
	    border-radius: 6px;
	    margin: auto;
	    margin-bottom: 54px;
	}
	.qdg-input{
		height: 38px;
		margin-bottom: 33px;
		background-color: rgba(0, 0, 0, .3);
		border-radius: 4px 4px;
		padding: 7px 10px;
		position: relative;
	}
	.uni-input-placeholder{
		color: #fff !important;
	}
	.uni-input-input{
		color: #fff !important;
	}
	.uv-input__content__field-wrapper__field{
		color:#fff !important;
	}
	.fgpassword{
		text-align: right;
		color: #fff;
		font-size: 14px;
	}
	.login_box .submit{
	    margin: 40px 0 25px 0;
	}
	.login_box .submit .submit-btn {
	    width: 70%;
	    font-size: 14px;
	    background: linear-gradient(135deg, #d66c6b, #ed6266);
	    color: #fff;
	    padding: 1px;
	    border-radius: 50px;
	}
	.login_box .register{
	    display: flex;
	    justify-content: center;
	    color: #fff;
	}
	.login_box .register .a{
	    color: #e06768;
	}
	.uni-page-head{
		display: none !important;
	}
		
</style>